<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
    <style>
        .big {
            font-size: 100px;
            color: "red";
            border: 5px solid purple;
        }
        .small {
            font-size: 20px;
            color: "blue";
            border: 1px solid green;
        }
    </style>
  </head>
  
  <body>
    <div class="dynamic">
        <span>使用jQuery动态控制样式</span>
    </div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("div.dynamic").css({
                fontSize: "100px",
                color: "gray",
                border: "1px solid green"
            });
            $("div.dynamic").addClass("big");
            $("div.dynamic").addClass("small");
            //如果存在
            if ($("div.dynamic").hasClass("dynamic")) {
                console.log("执行！");
                $("div.dynamic").removeClass("dynamic");
            }
            console.log($("div.dynamic").length);
            $("div.dynamic").removeClass("small");
            //toggle如果存在就删除，不存就添加
            $("div.dynamic").toggleClass("big");
            console.log($("div").position());
            console.log($("div").width());
            console.log($("div").height());
            console.log($("div").height("80px"));
        });
    </script>
  </body>
</html>